<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<style type="text/css">
			.mui-table-view-cell.mui-active {
				background-color: inherit;
			}
			.mui-table-view-cell:after {
				background-color: inherit;
			}
		</style>
	</head>

	<body>
		<div class="mui-content mui-text-center" id="pullrefresh">
			<ul class="mui-table-view mui-grid-view list">
				<li class="mui-table-view-cell mui-col-xs-6 mui-text-left"><p>日期</p></li>
				<li class="mui-table-view-cell mui-col-xs-6 mui-text-right"><p>收益</p></li>
				<div id="list">
					<li class="mui-table-view-cell list-nodata">
						快快邀请好友，享受交易佣金！
					</li>
				</div>
			</ul>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/parseTemplate.js" type="text/javascript" charset="utf-8"></script>
		<script id="tpl" type="text/html">
			<# var item;
				for(var i=0 ; i < data.length; i++) { item=data[i];
					if (i==0) firstID.list = item.HistoryID;
					if (i==data.length-1) lastID.list = item.HistoryID;
				#>
				<li class="mui-table-view-cell mui-col-xs-6 mui-text-left"><#= item.CreateTime #></li>
				<li class="mui-table-view-cell mui-col-xs-6 mui-text-right">+<#= item.ChangeBalance.toFixed(2) #></li>
				<# } #>
		</script> 
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					buildData(true);
										
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
					
					console.log("下拉刷新");
				}, 1500);
			};
			
			var count = 0;
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
					
					buildData(false, true);
					
					console.log("上拉加载");
				}, 1500);
			};
						
			var account;
			var $objs = {list:document.getElementById("list")};
			var tpl = {list:document.getElementById("tpl").innerHTML};
			var lastID = {list:null};
			var firstID= {list:null};
			var dataList;
									
			init = function(){							
				plus.nativeUI.showWaiting();
								
				buildData();
			};
			 
			build = function(url, type, isPull, isPush){				
				var data = {};
				if(isPush) data.LastID = lastID[type];
				if(isPull) data.FirstID = firstID[type];
				
				app.post(url, data, function(data){
					console.log(JSON.stringify(data));
					var html = parseTemplate(tpl[type], data);					
					
					if(html == ""){
						return;
					}
					console.log(firstID[type]);
					if(isPush || isPull){	
						if(isPull){
							$objs[type].insertAdjacentHTML("afterBegin", html);
						}
						else if(isPush){
							$objs[type].insertAdjacentHTML("beforeEnd", html);
						}
					}
					else{
						$objs[type].innerHTML = html;
					}
				});
			}
			
			buildData = function(isPull, isPush){
				build("GetsByTradeFeeAward", "list", isPull, isPush);
			};
						
			mui.plusReady(function(){
				init();
			});
		</script>
	</body>

</html>